<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5+CSS3鼠标悬停图片特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/set2.css" />
<link rel="stylesheet" type="text/css"
    href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body class="keBody">
    <h1 class="keTitle">HTML5+CSS3鼠标悬停图片特效</h1>
    <div class="kePublic">
        <!--效果html开始-->
        <div class="container">
            <header class="codrops-header">
                <nav class="codrops-demos">
                    <a href="index.html">Demo1</a> <a
                        class="current-demo" href="index2.html">Demo2</a>
                </nav>
            </header>

            <div class="content">

                <div class="grid">
                    <figure class="effect-julia">
                        <img src="img/01.jpg" alt="img21" />
                        <figcaption>
                            <h2>
                                Passionate <span>Julia</span>
                            </h2>
                            <div>
                                <p>Julia dances in the deep dark</p>
                                <p>She loves the smell of the ocean</p>
                                <p>And dives into the morning light</p>
                            </div>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-julia">
                        <img src="img/02.jpg" alt="img22" />
                        <figcaption>
                            <h2>
                                Passionate <span>Julia</span>
                            </h2>
                            <div>
                                <p>Julia dances in the deep dark</p>
                                <p>She loves the smell of the ocean</p>
                                <p>And dives into the morning light</p>
                            </div>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Goliath</h2>
                <div class="grid">
                    <figure class="effect-goliath">
                        <img src="img/02.jpg" alt="img23" />
                        <figcaption>
                            <h2>
                                Thoughtful <span>Goliath</span>
                            </h2>
                            <p>When Goliath comes out, you should
                                run.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-goliath">
                        <img src="img/01.jpg" alt="img24" />
                        <figcaption>
                            <h2>
                                Thoughtful <span>Goliath</span>
                            </h2>
                            <p>When Goliath comes out, you should
                                run.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Hera</h2>
                <div class="grid">
                    <figure class="effect-hera">
                        <img src="img/01.jpg" alt="img17" />
                        <figcaption>
                            <h2>
                                Tender <span>Hera</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-pdf-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-image-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-archive-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-code-o"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                    <figure class="effect-hera">
                        <img src="img/02.jpg" alt="img25" />
                        <figcaption>
                            <h2>
                                Tender <span>Hera</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-pdf-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-image-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-archive-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-file-code-o"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                </div>

                <h2>Winston</h2>
                <div class="grid">
                    <figure class="effect-winston">
                        <img src="img/02.jpg" alt="img30" />
                        <figcaption>
                            <h2>
                                Jolly <span>Winston</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-star-o"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-comments-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-envelope-o"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                    <figure class="effect-winston">
                        <img src="img/01.jpg" alt="img01" />
                        <figcaption>
                            <h2>
                                Jolly <span>Winston</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-star-o"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-comments-o"></i></a>
                                <a href="###"><i
                                    class="fa fa-fw fa-envelope-o"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                </div>

                <h2>Selena</h2>
                <div class="grid">
                    <figure class="effect-selena">
                        <img src="img/01.jpg" alt="img10" />
                        <figcaption>
                            <h2>
                                Happy <span>Selena</span>
                            </h2>
                            <p>Selena is a tiny-winged bird.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-selena">
                        <img src="img/02.jpg" alt="img31" />
                        <figcaption>
                            <h2>
                                Happy <span>Selena</span>
                            </h2>
                            <p>Selena is a tiny-winged bird.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Terry</h2>
                <div class="grid">
                    <figure class="effect-terry">
                        <img src="img/02.jpg" alt="img16" />
                        <figcaption>
                            <h2>
                                Noisy <span>Terry</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-download"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-heart"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-share"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-tags"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                    <figure class="effect-terry">
                        <img src="img/01.jpg" alt="img26" />
                        <figcaption>
                            <h2>
                                Noisy <span>Terry</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-download"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-heart"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-share"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-tags"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                </div>

                <h2>Phoebe</h2>
                <div class="grid">
                    <figure class="effect-phoebe">
                        <img src="img/01.jpg" alt="img03" />
                        <figcaption>
                            <h2>
                                Plain <span>Phoebe</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-user"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-heart"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-cog"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                    <figure class="effect-phoebe">
                        <img src="img/02.jpg" alt="img07" />
                        <figcaption>
                            <h2>
                                Plain <span>Phoebe</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-user"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-heart"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-cog"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                </div>

                <h2>Apollo</h2>
                <div class="grid">
                    <figure class="effect-apollo">
                        <img src="img/02.jpg" alt="img18" />
                        <figcaption>
                            <h2>
                                Strong <span>Apollo</span>
                            </h2>
                            <p>Apollo's last game of pool was so
                                strange.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-apollo">
                        <img src="img/01.jpg" alt="img22" />
                        <figcaption>
                            <h2>
                                Strong <span>Apollo</span>
                            </h2>
                            <p>Apollo's last game of pool was so
                                strange.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Kira</h2>
                <div class="grid">
                    <figure class="effect-kira">
                        <img src="img/01.jpg" alt="img17" />
                        <figcaption>
                            <h2>
                                Dark <span>Kira</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-home"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-download"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-heart"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-share"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                    <figure class="effect-kira">
                        <img src="img/02.jpg" alt="img05" />
                        <figcaption>
                            <h2>
                                Dark <span>Kira</span>
                            </h2>
                            <p>
                                <a href="###"><i
                                    class="fa fa-fw fa-home"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-download"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-heart"></i></a> <a
                                    href="###"><i
                                    class="fa fa-fw fa-share"></i></a>
                            </p>
                        </figcaption>
                    </figure>
                </div>

                <h2>Steve</h2>
                <div class="grid">
                    <figure class="effect-steve">
                        <img src="img/02.jpg" alt="img29" />
                        <figcaption>
                            <h2>
                                Lonely <span>Steve</span>
                            </h2>
                            <p>Steve was afraid of the Boogieman.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-steve">
                        <img src="img/01.jpg" alt="img33" />
                        <figcaption>
                            <h2>
                                Lonely <span>Steve</span>
                            </h2>
                            <p>Steve was afraid of the Boogieman.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Moses</h2>
                <div class="grid">
                    <figure class="effect-moses">
                        <img src="img/01.jpg" alt="img24" />
                        <figcaption>
                            <h2>
                                Cute <span>Moses</span>
                            </h2>
                            <p>Moses loves to run after butterflies.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-moses">
                        <img src="img/02.jpg" alt="img20" />
                        <figcaption>
                            <h2>
                                Cute <span>Moses</span>
                            </h2>
                            <p>Moses loves to run after butterflies.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Jazz</h2>
                <div class="grid">
                    <figure class="effect-jazz">
                        <img src="img/02.jpg" alt="img25" />
                        <figcaption>
                            <h2>
                                Dynamic <span>Jazz</span>
                            </h2>
                            <p>When Jazz starts to chase cars, the
                                whole world stands still.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-jazz">
                        <img src="img/01.jpg" alt="img06" />
                        <figcaption>
                            <h2>
                                Dynamic <span>Jazz</span>
                            </h2>
                            <p>When Jazz starts to chase cars, the
                                whole world stands still.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Ming</h2>
                <div class="grid">
                    <figure class="effect-ming">
                        <img src="img/01.jpg" alt="img09" />
                        <figcaption>
                            <h2>
                                Funny <span>Ming</span>
                            </h2>
                            <p>Ming sits in the corner the whole
                                day. She's into crochet.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-ming">
                        <img src="img/02.jpg" alt="img08" />
                        <figcaption>
                            <h2>
                                Funny <span>Ming</span>
                            </h2>
                            <p>Ming sits in the corner the whole
                                day. She's into crochet.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Lexi</h2>
                <div class="grid">
                    <figure class="effect-lexi">
                        <img src="img/02.jpg" alt="img12" />
                        <figcaption>
                            <h2>
                                Altruistic <span>Lexi</span>
                            </h2>
                            <p>Each and every friend is special.
                                Lexi won't hide a single cookie.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-lexi">
                        <img src="img/01.jpg" alt="img03" />
                        <figcaption>
                            <h2>
                                Altruistic <span>Lexi</span>
                            </h2>
                            <p>Each and every friend is special.
                                Lexi won't hide a single cookie.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

                <h2>Duke</h2>
                <div class="grid">
                    <figure class="effect-duke">
                        <img src="img/01.jpg" alt="img27" />
                        <figcaption>
                            <h2>
                                Messy <span>Duke</span>
                            </h2>
                            <p>Duke is very bored. When he looks at
                                the sky, he feels to run.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                    <figure class="effect-duke">
                        <img src="img/02.jpg" alt="img17" />
                        <figcaption>
                            <h2>
                                Messy <span>Duke</span>
                            </h2>
                            <p>Duke is very bored. When he looks at
                                the sky, he feels to run.</p>
                            <a href="###">View
                                more</a>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <nav class="codrops-demos">
                <a href="index.html">Demo1</a> <a class="current-demo"
                    href="index2.html">Demo2</a>
            </nav>

        </div>
        <!-- /container -->
        <!--效果html结束-->
        <div class="clear"></div>
    </div>
</body>
</html>